<template>
  <div class="nsw-container">
    <carousel-com />
    <div class="main-containr" style="min-width: 1200px;">
      <div class="design-task-container">
        <div class="design-header">
          <div class="design-header-title"><span>设计任务</span></div>
          <div class="design-header-detail">
            <span>创造好产品 共享设计力量</span>
          </div>
          <div class="design-header-more">
            <span><router-link to="/design-task">查看更多</router-link><i class="el-icon-arrow-right"></i></span>
          </div>
        </div>
        <div class="design-section">
          <el-row :gutter="40" v-for="index in 2" :key="index">
            <el-col :span="6" v-for="(o, index) in 4" :key="o">
              <div class="design-card">
                <img src="@/assets/success-case/2.jpg" class="image" />
                <div class="design-item">
                  <div class="item-title">
                    <span>好看的毛线衣服</span>
                  </div>
                  <div class="item-description">
                    <span>任务背景：</span>
                    <span title="该任务要求设计一款适合青少年穿着，休闲，百搭"
                      >该任务要求设计一款适合青少年穿着，休闲，百搭</span
                    >
                  </div>
                  <div class="item-details">
                    <div class="item-info">
                      <div><span>领域：男装</span></div>
                      <div><span>类型：上装</span></div>
                      <div class="item-money">
                        <span>佣金：</span><span class="money">999.98</span>
                      </div>
                    </div>
                    <div class="item-views">
                      <div class="item-count">
                        <div>
                          <span
                            ><i
                              class="el-icon-user-solid"
                              style="margin-right: 10px"
                            ></i
                            ><span>99</span></span
                          >
                        </div>
                        <div>
                          <span
                            ><i class="el-icon-view" style="margin: 0 10px"></i
                            ><span>17</span></span
                          >
                        </div>
                      </div>
                      <div class="check-item"><span>查看详情</span></div>
                    </div>
                  </div>
                  <div class="item-details"></div>
                </div>
              </div>
            </el-col>
          </el-row>
          <br /><br />
        </div>
      </div>
      <div class="success-case-container">
        <div class="success-case-container-bck">
          <div class="design-header" style="color: white">
            <div class="design-header-title"><span>成功案例</span></div>
            <div class="design-header-detail">
              <span>联合产品发布 打造万千瞩目爆款</span>
            </div>
            <div class="design-header-more">
              <span><router-link to="/success-case">查看更多</router-link><i class="el-icon-arrow-right"></i></span>
            </div>
          </div>
          <div class="success-case-section">
            <el-row>
              <el-col :span="16"
                ><div class="success-case-image">
                  <img src="@/assets/success-case/1.jpg" alt="pic" /></div
              ></el-col>
              <el-col :span="8"
                ><div class="success-case-image">
                  <img src="@/assets/success-case/2.jpg" alt="pic" /></div
              ></el-col>
            </el-row>
            <el-row>
              <el-col :span="8"
                ><div class="success-case-image">
                  <img src="@/assets/success-case/3.png" alt="pic" /></div
              ></el-col>
              <el-col :span="16"
                ><div class="success-case-image">
                  <img src="@/assets/success-case/4.jpg" alt="pic" /></div
              ></el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="about-us-container">
        <el-row>
          <div class="about-us-bck">
            <img
              src="@/assets/index-page-images/about-us-bck.jpg"
              alt="背景图"
            />
          </div>
          <div class="about-us">
            <div class="about-img">
              <img src="@/assets/index-page-images/about-us.jpg" />
            </div>
            <div class="about-text">
              <div class="title">
                <div class="english-title">
                  <span><strong>ABOUT US&nbsp;</strong></span>
                </div>
                <div class="chinese-title"><span>关于我们</span></div>
              </div>
              <div class="detail">
                <span>
                  服装设计以互联网思维及数字信息化对服装产业赋能，为全球13个国家提供服装产品研发方案及品牌管理解决方案，是众多服装公司及供应商指定的长期战略合作伙伴，服装设计落地的产品及优质的服务，全面降低服装企业的研发管理成本，支持服装企业快速发展及转型，孵化更多亿级服装企业。
                </span>
              </div>
              <div class="num-details">
                <div class="detail-item">
                  <div class="item-num"><span>15+</span></div>
                  <div class="item-text">
                    <span>年行业经验</span>
                  </div>
                </div>
                <div class="detail-item">
                  <div class="item-num"><span>10W+</span></div>
                  <div class="item-text">
                    <span>每年款式输出</span>
                  </div>
                </div>
                <div class="detail-item">
                  <div class="item-num"><span>5000+</span></div>
                  <div class="item-text">
                    <span>建立合作关系</span>
                  </div>
                </div>
              </div>
              <div class="about-more">
                <button>MORE <i class="el-icon-right"></i></button>
              </div>
            </div>
          </div>
        </el-row>
      </div>
      <div class="new-products-container">
        <el-row>
          <div class="new-products-title">
            <div class="english-title"><strong>NEW PRODUCTS</strong></div>
            <div class="chinese-title">新品推荐</div>
          </div>
          <div class="new-products-carousel">
            <el-carousel height="572px">
              <el-carousel-item>
                <div class="item-text">
                  <div class="item-title"><strong>趋势云展厅</strong></div>
                  <div class="item-title-detail">
                    <span>全球渠道买手组货</span>
                  </div>
                  <div class="item-details">
                    <span>快，新，全款式集合</span><br /><span
                      >免费租借，优享买断，惠享下单</span
                    >
                  </div>
                  <div class="item-button"><button>查看详情</button></div>
                </div>
                <div class="item-img">
                  <img
                    src="@/assets/index-page-images/new-products1.jpg"
                    alt="趋势云展厅"
                    style="width: 514px; height: 530px"
                  />
                </div>
              </el-carousel-item>
              <el-carousel-item>
                <div class="item-text">
                  <div class="item-title"><strong>原创样衣选购</strong></div>
                  <div class="item-title-detail">
                    <span>5000款+原创样衣</span>
                  </div>
                  <div class="item-details">
                    <span>每天上新200+新款</span><br /><span
                      >独属版权交易，原创保障</span
                    >
                  </div>
                  <div class="item-button"><button>查看详情</button></div>
                </div>
                <div class="item-img">
                  <img
                    src="@/assets/index-page-images/new-products2.jpg"
                    alt="原创样衣选购"
                    style="width: 528px; height: 296px"
                  />
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-row>
      </div>
      <div class="service-mode-container">
        <el-row>
          <div class="service-mode-title">
            <div class="english-title"><strong>SERVICE MODE</strong></div>
            <div class="chinese-title">服装设计服务模式</div>
          </div>
          <div class="service-mode-bar">
            <div class="counselor">
              <button
                v-on:mouseover="changeServiceMode"
                :class="{ 'mode-btn-active': isCounselorMode }"
              >
                专属设计顾问1V1
              </button>
            </div>
            <div>
              <button
                v-on:mouseover="changeServiceMode"
                :class="{ 'mode-btn-active': isAiMode }"
              >
                AI云设计
              </button>
            </div>
          </div>
          <div class="service-mode-describe">
            <div class="describe-item counselor-item" v-show="isCounselorMode">
              <div class="item-text">
                <div class="item-title">
                  <strong>专业顾问免费1V1服务</strong>
                </div>
                <div class="item-detail">
                  <span>
                    服装设计为您提供免费的设计咨询方案，这套方案可以帮助您公司找到新产品开发方向，创造属于自己风格的产品，仅限新用户专享！</span
                  >
                </div>
              </div>
              <div class="item-img">
                <img
                  src="@/assets/index-page-images/service-mode1.png"
                  alt="顾问"
                  style="width: 503px; height: 335px"
                />
              </div>
            </div>
            <div class="describe-item ai-item" v-show="isAiMode">
              <div class="item-text">
                <div class="item-title"><strong>在线一体化设计</strong></div>
                <div class="item-detail">
                  <span>
                    数百万用户净体数据推演规则 智能匹配设计 精细化版型</span
                  >
                </div>
              </div>
              <div class="item-img">
                <img
                  src="@/assets/index-page-images/service-mode2.png"
                  alt="Ai"
                  style="width: 503px; height: 335px"
                />
              </div>
            </div>
          </div>
        </el-row>
      </div>
      <div class="scope-of-business-container">
        <el-row>
          <div class="scope-of-business-title">
            <div class="english-title"><strong>SCOPE OF BUSINESS</strong></div>
            <div class="chinese-title">服装设计业务范围</div>
          </div>
          <div class="scope-of-business-bar">
            <div
              class="bar-item"
              v-for="item in businessBtns"
              :key="item.value"
            >
              <button
                @click="changeBusinessBtn(item.value)"
                :class="{
                  'business-btn-active': isBusinessBtnActive == item.value,
                }"
              >
                {{ item.label }}
              </button>
            </div>
          </div>
          <div class="scope-of-business-content">
            <div
              class="content-item"
              v-for="item in businessDetails"
              :key="item.index"
              v-show="isBusinessBtnActive == item.index"
            >
              <div class="content-text">
                <div class="content-title">
                  <div class="chinese-title">
                    <strong>{{ item.chineseTitle }}</strong>
                  </div>
                  <div class="english-title">
                    <strong>{{ item.englishTitle }}</strong>
                  </div>
                  <div class="title-describe">
                    <span>{{ item.titleDescribe }}</span>
                  </div>
                  <div class="title-footer">
                    <strong>{{ item.titleFooter }}</strong>
                  </div>
                </div>
                <div class="content-describe">
                  <div
                    class="describe-item"
                    v-for="(describeItem, index) in item.describeItems"
                    :key="index"
                  >
                    <div class="item-title">
                      <strong>{{ describeItem.title }}</strong>
                    </div>
                    <div class="item-detail">
                      <span>{{ describeItem.detail }}</span>
                    </div>
                  </div>
                </div>
                <div class="content-btn-container">
                  <div
                    class="content-btn"
                    v-for="(btnItem, index) in item.describeItems"
                    :key="index"
                  >
                    <button>立即体验</button>
                  </div>
                </div>
              </div>
              <div class="content-img">
                <div class="bck-box" style="width: 349px; height: 481px"></div>
                <div class="bck-img">
                  <img
                    :src="item.imgSrc"
                    alt="服装设计研发"
                    style="width: 357px; height: 484px; z-index: 3"
                  />
                </div>
              </div>
            </div>
          </div>
        </el-row>
      </div>
      <div class="global-selection-container">
        <el-row>
          <div class="selection-bck">
            <div class="selection-title">
              <div class="selection-describe">
                <strong>全球13个国家的共同选择</strong>
              </div>
              <div class="selection-text">
                <div
                  class="text-item"
                  v-for="(item, index) in globalSelections"
                  :key="index"
                >
                  <div class="item-container">
                    <div class="item-num">
                      <span>{{ item.num }}</span>
                    </div>
                    <div class="item-text">
                      <span>{{ item.text }}</span>
                    </div>
                  </div>
                  <div
                    class="item-divider"
                    v-show="index == 0 || index == 1 || index == 2"
                  >
                    <el-divider direction="vertical"></el-divider>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-row>
      </div>
      <div class="cooperation-customer">
        <el-row>
          <div class="cooperation-bck"></div>
        </el-row>
      </div>
      <div class="some-comments-container">
        <el-row>
          <div class="comments-bck">
            <div class="comments-content">
              <div class="comments-title">
                <div class="comments-logo"><span>NSW</span></div>
                <div class="comments-text">
                  <el-divider><span>他们这样评价</span></el-divider>
                </div>
              </div>
              <div class="comments-container">
                <div
                  class="comments-item"
                  v-for="(item, index) in comments"
                  :key="index"
                >
                  <div class="comment-describe">
                    <span>{{ item.describe }}</span>
                  </div>
                  <div class="comment-info">
                    <div class="avatar">
                      <el-avatar :size="80" :src="item.avatar"></el-avatar>
                    </div>
                    <div class="info">
                      <div class="name">
                        <strong>{{ item.name }}</strong>
                      </div>
                      <div class="position">
                        <span>{{ item.position }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-row>
      </div>
      <div class="brand-introduction-container">
        <el-row>
          <div class="intro-content">
            <div class="intro-logo">
              <img
                src="@/assets/index-page-images/brand-introduction-logo.png"
                alt="logo"
                style="width: 157px; height: 49px"
              />
            </div>
            <div class="intro-title">
              <span>品牌介绍</span>
            </div>
            <div class="intro-detail">
              <span>用设计创造价值，为服装企业报价护航</span>
            </div>
            <div class="intro-detail">
              <span>提供全球一流的服装研发生产及品牌管理解决方案</span>
            </div>
            <div class="intro-btn">
              <button>查看详情</button>
            </div>
          </div>
        </el-row>
      </div>
    </div>
    <!-- <success-case/> -->
  </div>
</template>

<script>
import CarouselCom from "@/components/Carousel";
import scopeOfBusinessImg1 from "@/assets/index-page-images/scope-of-business1.png";
import scopeOfBusinessImg2 from "@/assets/index-page-images/scope-of-business2.png";
import scopeOfBusinessImg3 from "@/assets/index-page-images/scope-of-business3.jpg";
import scopeOfBusinessImg4 from "@/assets/index-page-images/scope-of-business4.jpg";
import scopeOfBusinessImg5 from "@/assets/index-page-images/scope-of-business5.jpg";
import scopeOfBusinessImg6 from "@/assets/index-page-images/scope-of-business6.jpg";
import commentAvatar1 from "@/assets/index-page-images/comment-avatar1.png";
import commentAvatar2 from "@/assets/index-page-images/comment-avatar2.png";
import commentAvatar3 from "@/assets/index-page-images/comment-avatar3.png";

export default {
  name: "Home",
  components: {
    CarouselCom,
  },
  data() {
    return {
      isCounselorMode: true,
      isAiMode: false,
      isBusinessBtnActive: 1,
      businessBtns: [
        {
          label: "服装设计研发",
          value: 1,
        },
        {
          label: "服装品牌顾问",
          value: 2,
        },
        {
          label: "服装形象包装",
          value: 3,
        },
        {
          label: "服装生产代工",
          value: 4,
        },
        {
          label: "服装趋势平台",
          value: 5,
        },
        {
          label: "服装直播运营",
          value: 6,
        },
      ],
      businessDetails: [
        {
          index: 1,
          chineseTitle: "服装设计研发",
          englishTitle: "FASHON DESIGN",
          titleDescribe:
            "服装设计为品牌，批发和电商设计原创，时尚，简约，大方，有卖点，有细节，有设计感，返单方便，能跑量，性价比高的服装服饰款式及样衣",
          titleFooter: "D E S I G N",
          describeItems: [
            {
              title: "趋势云展厅",
              detail:
                "快，新，全，全品类款式集合，全球买手渠道组货，免费租借，优享买断，惠享下单",
            },
            {
              title: "原创样衣选购",
              detail:
                "全品类原创样衣，每天上新200+新款，独数版权交易，原创保障",
            },
            {
              title: "定向设计研发",
              detail:
                "知名设计总监18位，行业经验15年+，全职设计师700位+，全品类研发",
            },
          ],
          imgSrc: scopeOfBusinessImg1,
        },
        {
          index: 2,
          chineseTitle: "服装品牌顾问",
          englishTitle: "BRAND CONSULTANT",
          titleDescribe:
            "服装设计致力于为服装企业提供完整解决方案，对企业运行流程进行梳理及再造，进行专业的顾问指导，致力于孵化更多亿级服装企业",
          titleFooter: "C O N S U L T A N T",
          describeItems: [
            {
              title: "企划系列",
              detail:
                "从市场调研，趋势分析，销售数据，营销战略等多维度视角分析预判市场需求及变化趋势",
            },
            {
              title: "顾问系列",
              detail:
                "15年以上实战经验，从商业模式设计到生产销售全方位指导与问题解决方案",
            },
            {
              title: "孵化系列",
              detail:
                "从0-1-N对品牌进行全方位的孵化与打造，并帮助品牌打造明星或专属IP，享受独有的知识产权",
            },
          ],
          imgSrc: scopeOfBusinessImg2,
        },
        {
          index: 3,
          chineseTitle: "服装形象包装",
          englishTitle: "IMAGE PACKAGING",
          titleDescribe:
            "服装设计针对各类男装、女装、童装模特图拍摄，拍摄场地提供，服装陈列搭配，进行定制化一对一服务，增强品牌力，缔造良好终端形象，提供产品附加值",
          titleFooter: "I M A G E",
          describeItems: [
            {
              title: "拍摄摄影",
              detail:
                "提供模特预约，场地提供，图片精修，专业摄影师全程视觉指导",
            },
            {
              title: "陈列搭配",
              detail:
                "专业买手及陈列师，产品总监定制陈列搭配方案，指导产品搭配陈列",
            },
          ],
          imgSrc: scopeOfBusinessImg3,
        },
        {
          index: 4,
          chineseTitle: "服装生产代工",
          englishTitle: "PRODUCTION OEM",
          titleDescribe:
            "服装设计自设大型智能化现代工厂，拥有完善的生产设施以及高级的服装生产技术，是国内服装产品产业链的大型服装制造商，也是服装生产代加工优质服务合作商",
          titleFooter: "P R O D U C T I O N",
          describeItems: [
            {
              title: "OEM代工",
              detail:
                "大型自动化智能工厂，实现小单快返，灵活性强，经验成熟，与时俱进更新技术，全程跟踪指导",
            },
            {
              title: "ODM供应链",
              detail:
                "从设计研发到生产制造的全方位支持，最大限度的降低客户成本，省时，省心，省力，省钱",
            },
          ],
          imgSrc: scopeOfBusinessImg4,
        },
        {
          index: 5,
          chineseTitle: "服装趋势平台",
          englishTitle: "TREND PLATFORM",
          titleDescribe:
            "服装设计提供最新潮流男装，女装，童装资讯趋势，注册设计师20万+，可根据风格自设线上独立工作室",
          titleFooter: "T R E N D",
          describeItems: [
            {
              title: "趋势网站",
              detail:
                "提供全球最新时尚服饰潮流资讯，各种灵感素材，获取设计灵感",
            },
            {
              title: "线上工作室",
              detail: "线上设计师平台，20万+设计师入驻，搭建专属线上工作室",
            },
          ],
          imgSrc: scopeOfBusinessImg5,
        },
        {
          index: 6,
          chineseTitle: "服装直播运营",
          englishTitle: "LIVE BROADCAST OPERATION",
          titleDescribe:
            "服装设计以高品质服务高转化价值为理念，坚持不懈提升客户品牌价值，提供一站式企业直播方案，电商代运营方案，快速降低企业变现成本",
          titleFooter: "O P E R A T I O N",
          describeItems: [
            {
              title: "直播带货",
              detail: "产品变现，严选200+头部KOL达人，资源对接，种草转化",
            },
            {
              title: "品牌代运营",
              detail: "电商平台代运营，打造产品销售渠道，从0搭建线上店铺",
            },
          ],
          imgSrc: scopeOfBusinessImg6,
        },
      ],
      globalSelections: [
        {
          index: 1,
          num: "15",
          text: "行业经验15年+",
        },
        {
          index: 2,
          num: "73.06",
          text: "现客户选款率73.06%",
        },
        {
          index: 3,
          num: "5000",
          text: "服务企业5000+",
        },
        {
          index: 4,
          num: "100000",
          text: "投放爆款10W+/年",
        },
      ],
      comments: [
        {
          name: "杨小姐",
          position: "GT潮牌创始人",
          avatar: commentAvatar1,
          describe:
            "服装设计是我合作了3年的设计公司，从最开始的设计磨合，到现在他们可以主导我的产品，并且给我很多发展方面的专业建议，一直以来都是我很信赖的合作伙伴，他们始终围绕服务和产品，也希望服装设计设计师可以帮我产出更多爆款",
        },
        {
          name: "陈小姐",
          position: "GT潮牌创始人",
          avatar: commentAvatar2,
          describe:
            "我是第一批电商，看过有新品牌兴起，有旧品牌落寞，我深知能提升竞争力的唯有产品，服装设计产品设计上很用心，很落地，凌晨一两点还会帮我修改方案，跟服装设计合作半年多，现在跟他们设计师已经是很好的朋友了",
        },
        {
          name: "闵先生",
          position: "N-L-1品牌创始人",
          avatar: commentAvatar3,
          describe:
            "我不懂设计，对我来说，做了十几年服装见过太多款式，设计的再好，也很难有眼前一亮的感觉，但是我懂看款，适不适卖，能不能带来价值，我是清楚的。服装设计一直以落地的产品和优质的服务为核心，在这两点上我是认同的，如今我们的产品销量翻一倍，也让我清晰的知道，设计不只是创意，更多的是商业与价值",
        },
      ],
    };
  },
  methods: {
    changeServiceMode() {
      this.isCounselorMode = !this.isCounselorMode;
      this.isAiMode = !this.isAiMode;
    },
    changeBusinessBtn(index) {
      this.isBusinessBtnActive = index;
    },
  },
};
</script>

<style lang='scss' scoped>
$background-color1: rgb(0, 0, 0);
$background-color2: rgb(255, 255, 255);
$background-color3: rgb(213, 215, 214);
$background-color4: rgb(225, 225, 225);
$background-color5: rgb(68, 68, 68);
$font-color1: rgb(0, 0, 0);
$font-color2: rgb(255, 255, 255);
$font-color3: rgb(245, 245, 245);
@font-face {
  font-family: "youShe";
  src: url(~@/assets/YouSheBiaoTiHei-2.ttf);
}
.app-container {
  padding: 0;
}
.nsw-container {
  .design-task-container {
    background-color: #2b2b2b;
  }
  .design-header {
    height: 80px;
    color: white;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    & > div {
      height: 50px;
      span {
        line-height: 50px;
        font-family: youShe;
      }
    }
    .design-header-title {
      margin-left: 145px;
      span {
        font-size: 36px;
      }
    }
    .design-header-detail {
      margin-left: 20px;
      span {
        font-size: 24px;
      }
    }
    .design-header-more {
      margin-left: auto;
      margin-right: 50px;
      span {
        font-size: 20px;
      }
    }
  }
  .design-section {
    margin: 0 auto;
    width: 90%;
    .el-row {
      margin-bottom: 40px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .design-card {
      background-color: #ffe02b;
      color: #1e1e1e;
      height: 450px;

      padding: 15px;
      border-radius: 10px;
    }
    .design-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 10px;
      & > div {
        margin-bottom: 5px;
      }
      .item-title {
        span {
          font: {
            family: youShe;
            weight: 550;
            size: 24px;
          }
        }
      }
      .item-description {
        // width: 300px;
        // height: auto;
        // display: -webkit-box;
        // overflow: hidden; /*超出隐藏*/
        // text-overflow: ellipsis; /*隐藏后添加省略号*/
        // -webkit-box-orient: vertical;
        // -webkit-line-clamp: 2; //想显示多少行
        width: 100%;
        height: auto;
        word-wrap: break-word; /*强制换行*/
        overflow: hidden; /*超出隐藏*/
        text-overflow: ellipsis; /*隐藏后添加省略号*/
        white-space: nowrap; /*强制不换行*/
      }
      .item-details {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0 5px;
        .item-info {
          div {
            margin-bottom: 5px;
            span {
              font: {
                family: youShe;
                size: 18px;
              }
            }
          }
          .item-money {
            font: {
              size: 18px;
              weight: lighter;
            }
            .money {
              font: {
                size: 18px;
                weight: bolder;
              }
            }
          }
        }
        .item-views {
          .item-count {
            display: flex;
            span {
              font: {
                size: 18px;
                weight: bold;
              }
            }
          }
          .check-item {
            color: yellow;
            text-align: center;
            background-color: #000;
            margin-top: 10px;
            height: 45px;
            span {
              line-height: 45px;
              letter-spacing: 2px;
              font: {
                size: 24px;
                family: youShe;
                weight: lighter;
              }
            }
          }
        }
      }
    }
  }

  .success-case-container {
    background-repeat: no-repeat;
    background-image: url(~@/assets/success-case/4.jpg);
    background-size: cover;
    .success-case-container-bck {
      background-color: rgba(0, 0, 0, 0.8);
    }
    .success-case-section {
      width: 80vw;
      margin: 0 auto;
      .el-row {
        height: 400px;
        // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        .el-col {
          height: 400px;

          img {
            height: 400px;
            width: 100%;
          }
        }
      }
    }
  }
  .image {
    width: 100%;
    height: 250px;
  }
  .about-us-container {
    height: 870px;
    .about-us-bck {
      height: 300px;
      img {
        height: 300px;
        width: 100%;
        min-width: 1200px;
      }
    }
    .about-us {
      width: 1200px;
      height: 720px;
      display: flex;
      justify-content: space-between;
      margin: 0 auto;
      position: relative;
      top: -150px;
      z-index: 3;
      background-color: #fff;
      .about-img {
        img {
          width: auto;
          height: 720px;
        }
      }
      .about-text {
        width: 609px;
        height: 720px;
        display: flex;
        flex-direction: column;
        padding-left: 60px;
        .title {
          color: #242424;
          margin-top: 90px;
          .english-title {
            font: {
              size: 48px;
              family: Times New Roman, Times, serif;
            }
          }
          .chinese-title {
            margin-top: 15px;
            font: {
              family: Source Han Sans, Geneva, sans-serif;
              size: 24px;
            }
          }
        }
        .detail {
          width: 474px;
          height: 137px;
          margin-top: 20px;
          color: #4f4f4f;
          font-size: 14px;
          line-height: 2;
        }
        .num-details {
          display: flex;
          width: 474px;
          justify-content: space-between;
          .detail-item {
            .item-num {
              color: #242424;
              font: {
                size: 48px;
                family: Arial Black;
              }
            }
            .item-text {
              color: #4f4f4f;
              text-align: center;
              font: {
                size: 14px;
                family: Source Han Sans, Geneva, sans-serif;
              }
            }
          }
        }
        .about-more {
          margin-top: 45px;
          button {
            width: 156px;
            height: 46px;
            padding: 0 5px;
            background-color: #ffffff;
            border: 2px black solid;
            font-family: "Open Sans";
            font-size: 14px;
            color: #242424;
            font-weight: bold;
            &:hover {
              background-color: #242424;
              color: #fff;
              cursor: pointer;
              transition: all 0.4s ease-in-out;
            }
          }
        }
      }
    }
  }
  .new-products-container {
    min-width: 1200px;
    height: 827px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
    .new-products-title {
      text-align: center;
      margin-bottom: 30px;
      .english-title {
        font-size: 28px;
        line-height: 1.75;
      }
      .chinese-title {
        font-family: Source Han Sans, Geneva, sans-serif;
        font-size: 24px;
        line-height: 1.75;
      }
    }
    .new-products-carousel {
      width: 1200px;
      // box-shadow: ;
      ::v-deep .el-carousel__arrow {
        display: block !important;
        color: black;
      }
      ::v-deep .el-carousel__button {
        background-color: black;
      }
      .el-carousel__item {
        background-color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        .item-text {
          padding: 0 100px;
          .item-title {
            line-height: 1.72;
            font-size: 22px;
            margin-bottom: 10px;
            text-align: center;
          }
          .item-title-detail {
            font-size: 16px;
            color: #666666;
            line-height: 1.75;
            margin-bottom: 10px;
            text-align: center;
          }
          .item-details {
            font-size: 12px;
            font-family: Source Han Sans, Geneva, sans-serif;
            line-height: 2;
            margin-bottom: 15px;
            text-align: center;
          }
          .item-button {
            text-align: center;
            button {
              width: 133px;
              height: 36px;
              line-height: 36px;
              background-color: black;
              color: #ffffff;
              font-size: 14px;
              border: none;
              cursor: pointer;
            }
          }
        }
        .item-img {
          padding: 0 100px;
        }
      }
    }
  }
  .service-mode-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 761px;
    min-width: 1200px;
    .service-mode-title {
      text-align: center;
      margin-bottom: 30px;
      .english-title {
        font-size: 28px;
        line-height: 1.75;
      }
      .chinese-title {
        font-family: Source Han Sans, Geneva, sans-serif;
        font-size: 24px;
        line-height: 1.75;
      }
    }
    .service-mode-bar {
      display: flex;
      justify-content: center;
      div button {
        width: 554px;
        height: 43px;
        font-family: Tahoma;
        font-size: 16px;
        line-height: 43px;
        text-align: center;
        border: none;
        background-color: #f5f7fa;
        color: #666666;
        cursor: pointer;
      }
      .mode-btn-active {
        background-color: #000000;
        color: #ffffff;
      }
    }
    .service-mode-describe {
      .describe-item {
        display: flex;
        width: 1110px;
        height: 447px;
        justify-content: space-around;
        align-items: center;
        .item-text {
          text-align: center;
          .item-title {
            font-size: 22px;
            line-height: 1.75;
            margin-bottom: 10px;
          }
          .item-detail {
            font-size: 14px;
            color: #666666;
            width: 423px;
          }
        }
      }
      .item-img {
      }
    }
  }
  .scope-of-business-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 1200px;
    height: 850px;
    .scope-of-business-title {
      text-align: center;
      margin-bottom: 30px;
      .english-title {
        font-size: 28px;
        line-height: 1.75;
      }
      .chinese-title {
        font-family: Source Han Sans, Geneva, sans-serif;
        font-size: 24px;
        line-height: 1.75;
      }
    }
    .scope-of-business-bar {
      display: flex;
      justify-content: center;
      .bar-item button {
        border: none;
        border-bottom: 2px #e4393c solid;
        width: 196px;
        height: 51px;
        line-height: 51px;
        background-color: #f5f7fa;
        cursor: pointer;
        font: {
          weight: bold;
          size: 15px;
          family: Tahoma;
        }
      }
      .business-btn-active {
        background-color: #000000 !important;
        color: #ffffff;
      }
    }
    .scope-of-business-content {
      width: 1200px;
      height: 595px;
      .content-item {
        margin-top: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .content-text {
          width: 712px;
          height: 557px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          padding: 0 40px;
          box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.3);
          .content-title {
            border-bottom: 1px #000000 solid;
            .chinese-title {
              letter-spacing: 2px;
              font-size: 24px !important;
              line-height: 1.75;
            }
            .english-title {
              letter-spacing: 2px;
              line-height: 2;
              font-size: 14px;
              margin-bottom: 25px;
            }
            .title-describe {
              width: 560px;
              margin-left: 20px;
              font-size: 16px;
              line-height: 1.75;
              letter-spacing: 1.5px;
              color: #444444;
              margin-bottom: 5px;
            }
            .title-footer {
              text-align: right;
              margin: 0 10px 7px 0;
              font: {
                size: 12px;
                family: "Source Han Sans", Geneva, sans-serif;
              }
            }
          }
          .content-describe {
            height: 200px;
            display: flex;
            justify-content: space-around;
            border-bottom: 1px #000000 solid;
            .describe-item {
              text-align: center;
              .item-title {
                margin: 20px 0;
                font-size: 18px;
                letter-spacing: 1.5px;
              }
              .item-detail {
                width: 150px;
                margin-bottom: 25px;
                text-align: center;
                line-height: 1.75;
                letter-spacing: 1.5px;
                color: #444444;
                font-size: 12px;
              }
            }
          }
          .content-btn-container {
            display: flex;
            justify-content: space-around;
            // margin: 25px 0 30px 0;
            .content-btn button {
              text-align: center;
              width: 134px;
              height: 37;
              line-height: 37px;
              padding: 0 5px;
              background-color: #000000;
              color: #ffffff;
              font-size: 12px;
              font-family: Tahoma;
              border: none;
              cursor: pointer;
              &:hover {
                background-color: #666666;
              }
            }
          }
        }
        .content-img {
          width: 377px;
          height: 500px;
          position: relative;
          .bck-box {
            background-color: #edf1fc;
            position: absolute;
            bottom: 0;
            right: 4px;
          }
          .bck-img {
            position: absolute;
            top: 0;
          }
        }
      }
    }
  }
  .global-selection-container {
    .selection-bck {
      min-height: 545px;
      background-image: url("~@/assets/index-page-images/global-selection.jpg");
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      .selection-title {
        color: #ffffff;
        .selection-describe {
          text-align: center;
          margin: 120px 0 80px 0;
          font: {
            size: 30px;
            family: Source Han Sans, Geneva, sans-serif;
          }
        }
        .selection-text {
          width: 970px;
          display: flex;
          justify-content: space-around;
          .text-item {
            text-align: center;
            display: flex;
            .item-container {
              .item-num {
                margin-bottom: 10px;
                font: {
                  size: 36px;
                  family: Arial, sans-serif;
                  weight: bold;
                }
              }
              .item-text {
                font-size: 16px;
              }
            }
            .item-divider ::v-deep .el-divider--vertical {
              height: 70px;
              margin-left: 70px;
            }
          }
        }
      }
    }
  }
  .cooperation-bck {
    min-width: 1200px;
    height: 898px;
    background-image: url("~@/assets/index-page-images/cooperation-customer.jpg");
    background-position: 50% 50%;
    background-repeat: repeat;
    background-size: auto;
    background-color: #ffffff;
  }
  .some-comments-container {
    .comments-bck {
      min-height: 550px;
      background-image: url("~@/assets/index-page-images/some-comments.png");
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
      .comments-content {
        width: 100%;
        min-height: 550px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        .comments-title {
          text-align: center;
          .comments-logo {
            line-height: 1.5;
            font: {
              size: 36px;
              family: Arial Black;
            }
          }
          .comments-text {
            width: 370px;
          }
        }
        .comments-container {
          width: 100%;
          display: flex;
          justify-content: space-around;
          align-items: center;
          margin-bottom: 20px;
          .comments-item {
            width: 316px;
            height: 318px;
            background-color: #ffffff;
            box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            .comment-describe {
              width: 260px;
              height: 135px;
              margin: 40px 0 20px 0;
              color: #999999;
              line-height: 1.5;
              font: {
                size: 10px;
                family: "宋体";
              }
            }
            .comment-info {
              display: flex;
              align-items: center;
              .avatar {
                margin-right: 20px;
              }
              .info {
                .name {
                  margin-bottom: 10px;
                }
              }
            }
          }
        }
      }
    }
  }
  .brand-introduction-container {
    min-width: 1200px;
    height: 417px;
    background-image: url("~@/assets/index-page-images/brand-introduction.jpg");
    background-position: 50% 50%;
    background-repeat: repeat;
    background-size: auto;
    background-color: #ffffff;
    .intro-content {
      width: 1200px;
      height: 417px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;
      text-align: center;
      .intro-title {
        font-size: 30px;
        line-height: 1.75;
        color: #ffffff;
        font-family: Source Han Sans, Geneva, sans-serif;
        margin: 10px 0;
      }
      .intro-detail {
        color: #ffffff;
        letter-spacing: 2px;
        font-size: 16px;
        line-height: 2;
      }
      .intro-btn button {
        width: 133px;
        height: 38px;
        line-height: 36px;
        margin-top: 20px;
        padding: 0 5px;
        background-color: rgba(0, 0, 0, 0);
        color: #ffffff;
        border: 1px #fff solid;
        font-size: 14px;
        font-family: Tahoma;
        cursor: pointer;
      }
    }
  }
}
</style>
